addEventListener() মেথড

kt_satt_skill_example_id=1482

নির্দিষ্ট একটি এলিমেন্টের মধ্যে addEventListener() মেথড একটি ইভেন্ট হ্যান্ডেলার যোগ করেছে।

এলিমেন্টের আগের ইভেন্ট হ্যান্ডেলারটি বাদ দেওয়া ছাড়াই addEventListener() মেথডটি ইভেন্ট হ্যান্ডেলার যোগ করে।

একটি এলিমেন্টের মধ্যে আপনি একাধিক ইভেন্ট হ্যান্ডেলার যোগ করতে পারেন।

একটি এলিমেন্টের মধ্যে আপনি একই টাইপের একাধিক ইভেন্ট হ্যান্ডেলার যোগ করতে পারেন। উদাহণস্বরূপ, দুইটি "click" ইভেন্ট।

এইচটিএমএল এলিমেন্ট ছাড়াও আপনি যেকোন ডোম অবজেক্টে ইভেন্টলিসেনার যোগ করতে পারেন। উদাহণস্বরূপ উইন্ডো অবজেক্ট।

addEventListener() মেথড ইভেন্ট বাবলিং নিয়ন্ত্রন করা সহজ করে দেয়।

আপনি খুব সহজেই removeEventListener() মেথড ব্যবহার করে একটি ইভেন্টলিসেনার বাদ দিতে পারেন।

kt_satt_skill_example_id=1483

প্রথম প্যারামিটারে ইভেন্টের নাম থাকে যেমন "click" , "mousedown"।

দ্বিতীয় প্যারামিটারটি হলো একটি কলব্যাক ফাংশন যা ইভেন্ট ঘটলে রান হয়।

তৃতীয় প্যারামিটারটি ইভেন্ট বাবলিং অথবা ইভেন্ট ক্যাপচারিং ব্যবহার করার জন্য একটি বুলিয়ান ভ্যালু নির্দেশ করে। এই প্যারামিটারটি ঐচ্ছিক।

ইভেন্টের নামের আগে "on" ব্যবহার করবেন না। "onclick" এর পরিবর্তে "click" ব্যবহার করবেন।

এলিমেন্টে ইভেন্ট হ্যান্ডেলার যোগ

kt_satt_skill_example_id=1484

এছাড়া আপনি বাহিরে ডিফাইন করা একটি ফাংশনের নাম উল্লেখ করেও করতে পারেনঃ

kt_satt_skill_example_id=1485

একটি এলিমেন্টে একাধিক ইভেন্ট হ্যান্ডেলার যোগ করা

addEventListener() মেথড ব্যবহার করে আগের ইভেন্ট হ্যান্ডেলারটি বাদ দেওয়া ছাড়াই এলিমেন্টের মধ্যে একাধিক ইভেন্ট হ্যান্ডেলার যোগ করা যায়ঃ

kt_satt_skill_example_id=1487

আপনি একই এলিমেন্টে বিভিন্ন টাইপের ইভেন্ট যোগ করতে পারেনঃ

kt_satt_skill_example_id=1488

উইন্ডো অবজেক্টে ইভেন্ট হ্যান্ডেলার যোগ করা

addEventListener() মেথডটি যেকোন এইচটিএমএল ডোম অবজেক্ট যেমন এইচটিএমএল এলিমেন্ট, এইচটিএমএল ডকুমেন্ট, উইন্ডো অবজেক্ট অথবা অন্যান্য অবজেক্ট যারা ইভেন্ট সাপোর্ট করে তাদের মধ্যে ইভেন্ট যোগ করতে সাহায্য করে।

kt_satt_skill_example_id=1490

প্যারামিটার দেওয়া

প্যারামিটার ভ্যালু পাস করতে চাইলে একটি "anonymous" ফাংশন ব্যবহার করতে হবে যার মধ্যে প্যারামিটারসহ ফাংশনটি থাকবেঃ

kt_satt_skill_example_id=1491

ইভেন্ট বাবলিং অথবা ইভেন্ট ক্যাপচারিং

এইচটিএমএল ডোমে ইভেন্ট প্রপাগেশনের দুইটি পদ্ধতি রয়েছে ইভেন্ট বাবলিং এবং ইভেন্ট ক্যাপচারিং।

ইভেন্ট প্রপাগেশন হচ্ছে একটি ইভেন্ট ঘটলে এলিমেন্টের ধারাবাহিকতা চিহ্নিত করার একটি পদ্ধতি। যদি একটি <div> এলিমেন্টের ভিতরে একটি <p> এলিমেন্ট থাকে এবং ব্যবহারকারী <p> এলিমেন্টে ক্লিক করে তাহলে কোন এলিমেন্টের ক্লিক ইভেন্ট আগে কাজ করবে?

bubbling এর ক্ষেত্রে ভিতরের এলিমেন্টের ইভেন্ট আগে কাজ করে এবং পরে বাহিরের গুলো কাজ করে: <p> এলিমেন্টের ক্লিক ইভেন্টটি আগে কাজ করবে, পরে <div> এলিমেন্টের ক্লিক ইভেন্টটি কাজ করে।

capturing এর ক্ষেত্রে বাহিরের এলিমেন্টের ইভেন্ট আগে কাজ করে এবং পরে ভিতরেরগুলো কাজ করে: <div> এলিমেন্টের ক্লিক ইভেন্টটি আগে কাজ করে, পরে <p> ইলিমেন্টের ক্লিক ইভেন্টটি কাজ করে।

addEventListener() মেথডে আপনি "useCapture" প্যারামিটারটি ব্যবহার করে প্রপাগেশন টাইপ নির্ধারণ করতে পারেন:

kt_satt_skill_example_id=1492

এখানে ডিফল্ট ভ্যালু false, যেটা বাবলিং প্রপাগেশন করতে ব্যবহার করা হয়। যখন ভ্যালু true থাকে, তখন ক্যাপচারিং প্রপাগেশন সক্রিয় হয়।

kt_satt_skill_example_id=1493

removeEventListener() মেথড

addEventListener() মেথড দ্বারা যুক্ত ইভেন্ট হ্যান্ডেলারকে বাদ দিতে removeEventListener() মেথডটি ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1494

ব্রাউজার সাপোর্ট

নোট: addEventListener() এবং removeEventListener() মেথড ইন্টারনেট এক্সপ্লোরার-৮ এবং এর পূর্বের ভার্সনে সাপোর্ট করে না এবং অপেরা 6.0 এবং এর পূর্বের ভার্সনেও সাপোর্ট করে না। এসকল ব্রাউজারে একটি ইভেন্ট যোগ করার জন্য আমরা attachEvent() মেথড ব্যবহার করতে পারি এবং বাদ দেয়ার জন্য detachEvent() মেথড ব্যবহার করতে পারিঃ

kt_satt_skill_example_id=1495

ক্রস ব্রাউজার সমাধানঃ

kt_satt_skill_example_id=1496

এইচটিএমএল ডোম ইভেন্ট অবজেক্ট রেফারেন্স

সকল এইচটিএমএল ডোম ইভেন্টের একটি তালিকা দেখার জন্য আমাদের এইচটিএমএল ডোম ইভেন্ট অবজেক্ট রেফারেন্স দেখুন।